<template>
	<view class="container">
		<view class="usHeadcon">
			<button class="usEditBtn">
				<uni-icons type="gear" size="30">
				</uni-icons>
			</button>
			<img class="usbcImg" :src="userInf.ubcImg" alt="用户背景图片加载失败" />
			<view class="usbcMask">

			</view>
			<view class="usInf">
				<view class="usAS">
					<img class="usavatarImg" :src="userInf.avatar" alt="用户头像图片加载失败" />
					<view class="usSex" :style="{ backgroundColor: genderCheck().genderColor }">
						<u-icon size="28" :name="genderCheck().genderName" bold="true" color="white"></u-icon>
					</view>
				</view>

				<view class="usName">
					<span>{{userInf.nickName}}</span>
				</view>
				<span class="usId">ID:{{userInf.id}}</span>
				<!-- <span class="usItr">{{userInf.age}}岁</span> -->
				<span class="usItr">{{userInf.address}}</span>
				<view class="usSignature">
					<span>— {{userInf.email}} —</span>
				</view>
				<view class="" v-if="!userInf.treeId">
					未绑定家族
				</view>
				<view class="" v-else>
					<!-- {{userInf.treeId}} -->
					已绑定家族
				</view>
			</view>
		</view>
		<view class="usContent">
			<view class="usCard" v-for="(item,i) in usCList" :key='item.id' @click="cardturn(item.Curl)">
				<view class="usCicon">
					<u-icon size="50" :name="item.Cicon" color="black"></u-icon>
				</view>
				<view class="usCName">
					{{item.Cname}}
				</view>
				<view class="usCNum">
					{{item.Cnum}}条
				</view>
				<view class="usCs">
					<span style="font-size: 50rpx;font-weight: 800;margin-bottom: 2rpx;"> ></span>
				</view>
			</view>
		</view>
	</view>



</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	// 引入用户仓库
	import {
		useUserStore
	} from '@/store/index.js'
	import {
		wxCodeCheck,
		loginToBc
	} from '@/apis/login.js'
	// 调用useUserStore
	const useUser = useUserStore();
	// 临时用户信息存储
	const userInf = ref({
		name: 'XXX',
		userId: 'XXXX',
		gender: '0', //男1、女2
		age: 20,
		nativePlace: '', //籍贯
		phoneNum: '', //电话号码
		occupation: '', //职业
		liveAddress: '', //居住地址
		educationalLevel: '', //受教育程度
		bornAdress: '', //出生地
		ubcImg: '../../static/demo_img/caln/c3.png',
		//微信默认黑色头像
		uavatarImg: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
		usignature: '--', //个性签名
		treeId: '',
	})
	const userGen = ref('CB8101');
	const usCList = ref([
		// 	{
		// 	Cicon: 'file-text',
		// 	Cname: '我的家族文献',
		// 	Cnum: 1,
		// 	Curl: "personalCenter/personalPage/personalArticle",
		// }, {
		// 	Cicon: 'order',
		// 	Cname: '参与活动记录',
		// 	Cnum: 1,
		// 	Curl: '',
		// }, {
		// 	Cicon: 'red-packet',
		// 	Cname: '我的捐款记录',
		// 	Cnum: 1,
		// 	Curl: '',
		// }, {
		// 	Cicon: 'fingerprint',
		// 	Cname: '权限修改申请',
		// 	Cnum: 1,
		// 	Curl: '',
		// }, {
		// 	Cicon: 'bell-fill',
		// 	Cname: '帮助中心',
		// 	Cnum: 1,
		// 	Curl: '',
		// },
	]);
	const cardturn = (cUrl) => {
		uni.navigateTo({
			// 补充路由"/pages+'url'"
			url: "/pages/" + cUrl,
			animationType: 'pop-in', // 设置页面切入动画类型
			animationDuration: 200, // 设置页面切入动画持续时间
		})
	}

	// const signupturn = () => {
	// 	uni.navigateTo({
	// 		// 补充路由"/pages+'url'"
	// 		url: "../../pages/signUp/signUp",
	// 		animationType: 'pop-in', // 设置页面切入动画类型
	// 		animationDuration: 200, // 设置页面切入动画持续时间
	// 	})
	// }
	const genderCheck = () => {
		console.log(userInf.value.gender,"gender")
		const genderCon = reactive({
			genderName: 'question',
			genderColor: 'grey'
		})
		if (userInf.value.gender == 1) {
			genderCon.genderName = 'man';
			genderCon.genderColor = 'skyblue'
		} else if (userInf.value.gender == 2) {
			genderCon.genderName = 'woman';
			genderCon.genderColor = 'pink'
		} else if (userInf.value.gender == 0) {
			genderCon.genderName = 'question';
			genderCon.genderColor = 'grey'
		}
		return genderCon
	}

	// const wxLogin = () => {
	// 	wx.login({
	// 		success(res) {
	// 			if (res.code) {
	// 				//发起网络请求
	// 				const UserCode = res.code;
	// 				console.log("wxLogin")
	// 				wxCodeCheck({
	// 					"code": UserCode
	// 				}).then(res2 => {
	// 					console.log(res2.data, "ss2")
	// 					const ifNew = res2.data.needNew;
	// 					const openId = res2.data.wxOpenId;
	// 					useUser.openId = openId
	// 					console.log(openId, ifNew)
	// 					if (ifNew == true) {
	// 						signupturn();
	// 					}
	// 					if (ifNew == false) {
	// 						const userRes = res2.data.user
	// 						userInf.value.uavatarImg = userRes.avatar
	// 						userInf.value.name = userRes.nickName
	// 						userInf.value.userId = userRes.id
	// 						userInf.value.liveAddress = userRes.adress
	// 						useUser.UserAccessToken = userRes.accessToken
	// 						console.log(userRes.accessToken, "resToken")
	// 						// loginToBc({
	// 						// 	account: userRes.account,
	// 						// 	password: userRes.password
	// 						// }).then(res => {
	// 						// 	console.log(res.data)
	// 						// 	useUser.UserAccessToken = userRes.accessToken
	// 						// })
	// 					}
	// 				}).catch(err => {
	// 					console.log(err, "err")
	// 				})
	// 			} else {
	// 				console.log('登录失败！' + res.errMsg)
	// 			}
	// 		}
	// 	})
	// }

	const userInit = () => {
		userInf.value = useUser.userProfile
		console.log(userInf.value)
		userInf.value.ubcImg = '../../static/demo_img/caln/c3.png'
	}
	onShow(() => {
		//修改从在个人中心去登陆=>首页登录然后在个人中心获取信息
		// wxLogin();
		userInit();
	})

	import {
		onShow
	} from '@dcloudio/uni-app'
</script>


<style>
	page {
		background: linear-gradient(209deg, #FFF1E7 10%, #d5a787 90%);
	}
</style>
<style lang="scss">
	.container {

		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.usHeadcon {
			height: 30vh;
			background-color: aliceblue;
			width: 100%;
			position: relative;


			.usEditBtn {
				position: absolute;
				height: 80rpx;
				width: 80rpx;
				top: 20rpx;
				right: 20rpx;
				z-index: 2;
				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.usbcImg {
				height: 100%;
				width: 100%;
				position: absolute;
				z-index: 1;

			}

			.usbcMask {
				height: 27vh;
				width: 70vw;
				position: absolute;
				top: 4vh;
				left: 15vw;
				background: rgba(255, 255, 255, 0.25);
				box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
				backdrop-filter: blur(4px);
				-webkit-backdrop-filter: blur(4px);
				border-radius: 10px;
				border-top-right-radius: 140px;
				border-top-left-radius: 140px;
				border: 1px solid rgba(255, 255, 255, 0.18);
				z-index: 2;

			}

			.usInf {
				position: absolute;
				z-index: 3;
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.usAS {
					margin-top: 10rpx;
					position: relative;
					height: 160rpx;
					width: 160rpx;

					.usavatarImg {
						height: 160rpx;
						width: 160rpx;
						border-radius: 100%;
						z-index: 2;

						box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
					}

					.usSex {
						bottom: 0rpx;
						right: 0rpx;
						background-color: skyblue;
						border-radius: 100%;
						position: absolute;
					}
				}


				.usName {
					margin-top: 6rpx;
					font-size: 40rpx;
					font-weight: 600;
				}

				.usId {
					font-size: 20rpx;
					margin-bottom: 6rpx;
				}

				.usItr {
					font-size: 26rpx;
					font-weight: 700;
					padding: 5rpx;
					display: flex;
					gap: 20rpx;
					// background-color: rgba(124, 172, 180, 0.5);
					// border-radius: 4rpx;
				}

				.usSignature {
					margin-top: 1rpx;
					font-size: 30rpx;
					font-weight: 700;
					color: black;
				}
			}

		}

		.usContent {
			z-index: 2;
			margin-top: 45rpx;

			.usCard {
				margin-top: 13rpx;
				position: relative;
				display: flex;
				align-items: center;
				height: 10vh;
				width: 85vw;
				// background: rgba(255, 255, 255, 0.5);
				// box-shadow: 0 9px 12px 0 rgba(135, 99, 99, 0.4);
				// backdrop-filter: blur(8px);
				// -webkit-backdrop-filter: blur(8px);
				// border-radius: 10px;
				background: rgba(255, 255, 255, 0.25);
				box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(4px);
				-webkit-backdrop-filter: blur(4px);
				border-radius: 10px;

				.usCicon {
					margin-left: 20rpx;
				}

				.usCName {
					margin-left: 20rpx;
					font-size: 37rpx;
					font-weight: 700;
				}

				.usCNum {
					position: absolute;
					right: 60rpx;
					font-size: 30rpx;
					border-bottom: 2rpx solid rgba(139, 0, 0, 0.3);
				}

				.usCs {
					position: absolute;
					right: 10rpx;
				}
			}
		}
	}
</style>